<template>
	<div class="gn_rightbox" v-if="$route.name !== '维修人员'">
		<el-button class="gn_rightshowbtn" @click="rightShow" type="text"><i class="el-icon-caret-right"></i></el-button>

		<div class="gnr_main" v-show="isShow" >
			<p class="gnr_tit">排队中</p>
			<div class="gnr_mesgbox">
				<div class="nomessage" v-show="pdshow">暂无相关数据</div>
				<div class="gnr_list clearfix" v-for="(item,index) in queuing" :key="index" @click="queuingAnswer(index)" v-show="!pdshow">
					<div class="fl">
						<p>{{item.callerid}}</p>
						<p class="gnr_time"><i class="el-icon-time"></i>{{item.wait}}</p>
					</div>
					<a class="fr">
						<span class="gnr_phonebtn "><i class="el-icon-phone-outline"></i>立即接听</span>
					</a>
				</div>

			</div>
		</div>
		<div class="gnr_main" v-show="isShow">
			<p class="gnr_tit">历史通话</p>
			<div class="gnr_mesgbox">
				<div class="nomessage" v-show="historyshow">暂无相关数据</div>
				<div class="gnr_list clearfix" v-for="(item,index) in historyQueue" :key="index" @click="historyPhoneCallback(index)">
					<div class="fl">
						<p>{{item.number}}</p>
						<p class="gnr_time"><i class="el-icon-time"></i>{{item.calldate}}</p>
					</div>
					<a class="fr">
						<span class="gnr_phonebtn"><i class="el-icon-phone-outline"></i>立即回拨</span>
					</a>
				</div>

			</div>
		</div>
		<p class="gnr_hidtips" v-show="!isShow" @click="rightShow">排队中</p>
		<p class="gnr_hidtips" v-show="!isShow" @click="rightShow">历史通话</p>
	</div>

</template>

<script>
import bus from '@/api/bus'
import {
	pbxQueueSearch,
	pbxPhoneHistoryList,
	pxbPhoneAnswer,
	pxbPhoneCallback} from '@/api'
export default {
	//name: 'right',
	data () {
	    return {
	    	isShow:true,
	     	queuing:[],
	     	historyQueue:[],
	     	loginState:'',
	     	roleId:'',
	     	pdshow:false,
	     	historyshow:false
	    }
	},
	beforecreate(){
        let roleIdNumber = JSON.parse(sessionStorage.getItem('userInfo')).roleId;
        this.roleId = roleIdNumber
        if(this.roleId == 3){
        	bus.$emit('hideEvent', true)
        }
    },
	created(){
		//setInterval(方法,间隔秒数)方法不要带()在methods定义个函数,否则参数传不进去
		//mounted其他的生命周期内写方法会持续调用,不需要setInterval调用
		let roleIdNumber = JSON.parse(sessionStorage.getItem('userInfo')).roleId;
		this.roleId = roleIdNumber
		if(this.roleId == 1 || this.roleId == 2|| this.roleId == 4){
			setInterval(this.setQueueing, 1000);
		}else if(this.roleId == 3){
			bus.$emit('hideEvent', true)
		}
	},
	destroyed() {
		if(this.setQueueing) { //如果定时器在运行则关闭
			clearInterval(this.setQueueing);
		}
	},
    methods: {
		rightShow() {//中间右侧内容点击收起效果,isShow为真的时候收起
			if(this.isShow){
				document.getElementsByClassName('gn_rightbox')[0].style.width = '40px';
				document.getElementsByClassName('gn_leftbox')[0].style.right = '50px';
				this.isShow=false;
			}else{
				document.getElementsByClassName('gn_rightbox')[0].style.width = '280px';
				document.getElementsByClassName('gn_leftbox')[0].style.right = '290px';
				this.isShow=true;
			}
		},
		queueSearchTable (params) {//调入队列查询接口(排队中)--code错误不应该提示
			pbxQueueSearch (params).then(res => {
				// console.log(res)
				let code = res.data.code;
				if(code == 0){
					let data = res.data.data;
					if(data.length == 0){
						this.pdshow = true
					}else{
						this.pdshow = false
						this.queuing = data;
					}
				}else if(code == 1){
					// this.$message({
					// 	message: '队列号码有误!'
					// })
				}
			});
		},
		phoneAnswer (params) { //调入接听电话接口(立即接听)
			pxbPhoneAnswer (params).then(res => {
				// console.log(res)
				let code = res.data.code;
				if(code == 0){  //需要调出弹屏页面
					this.$router.push({
						path: '/home/oncall',
						query: {
							callPhone: params.callerid
						}
					})
					bus.$emit('hideEvent', true)
				}else if(code == 1){
					// this.$message({
					// 	message: '主叫码号错误!'
					// })
				}
				else if(code == 2){
					// this.$message({
					// 	message: '分机号错误!'
					// })
				}
				else if(code == 3){
					// this.$message({
					// 	message: '选接失败!'
					// })
				}
			});
		},
		historySearchTable (params) {//调入历史通话查询接口--code错误提示不应该提示
			pbxPhoneHistoryList (params).then(res => {
				// console.log(res)
				let code = res.data.code;
				if(code == 0){
					let data = res.data.data;
					if(data.length == 0){
						this.historyshow = true
					}else{
						this.historyshow = false
						this.historyQueue = data;
					}
				}else if(code == 1){
					// this.$message({
					// 	message: '分机号错误!'
					// })
				}else if(code == 2){
					// this.$message({
					// 	message: '工号错误!'
					// })
				}
			});
		},
		phoneCallback (params) { //调入呼出电话接口(立即回拨)
			pxbPhoneCallback (params).then(res => {
				// console.log(res)
				let code = res.data.code;
				if(code == 0){
					this.$router.push({
						path: '/home/oncall',
						query: {
							callPhone: params.called
						}
					})
					bus.$emit('hideEvent', true)
				}else if(code == 1){
					this.$message({
						message: '分机号错误!'
					})
				}else if(code == 2){
					this.$message({
						message: '被叫号错误!'
					})
				}
				else if(code == 3){
					this.$message({
						message: '呼叫失败!'
					})
				}
			});
		},
		setQueueing(){
			let params ={ //调用排队中接口
				queue: sessionStorage.getItem('queue')
			}
			this.queueSearchTable(params);
			//console.log('查看是否执行排队中和历史记录的接口')
			//调用分机通话记录
			let staffNumber = JSON.parse(sessionStorage.getItem('userInfo')).userId;
			let historyparams = {
				device: sessionStorage.getItem('device'),
				staff: staffNumber
			}
			this.historySearchTable(historyparams);
		},
		queuingAnswer(index){ //点击排队中接听电话调用接口phoneAnswer接听电话
			let data=this.queuing;
			//console.log(data[index].callerid)
			let params = {
				device: sessionStorage.getItem('device'),
				callerid: data[index].callerid
			}
			this.phoneAnswer (params)
		},
		historyPhoneCallback(index){ //点击排队中呼出电话调用接口phoneCallback拨打出电话
			let data=this.historyQueue;
			//console.log(data[index].number) //确认拨打电话号码
			let params = {
				device: sessionStorage.getItem('device'),
				called: data[index].number
			}
			this.phoneCallback (params)
		},
    }
};
</script>
<style >
	.gn_rightbox{position:fixed;top:90px;right:15px;width:280px;margin-left:20px;background:#fff;box-shadow:0 0 3px #999;}
	.gn_rightbox .el-card__header{padding:10px 20px;}
	.gn_rightshowbtn{position:absolute;right:5px;top:5px;padding:0;font-size:26px;color:#01d39a;}
	.gnr_mesgbox{border:1px solid #eee;margin:0 10px;}
	.gnr_list{margin:3px 10px 0px;padding-bottom:2px;border-bottom:1px solid #eee;color:#2a3648;font-size:14px;}
	.gnr_time{color:#999;font-size:12px;line-height:14px;}
	.gnr_phonebtn{display:block;text-align:right;color:#2bdaa7;font-size:12px;line-height:40px;}
	.gnr_phonebtnback{display:block;text-align:right;color:#2bdaa7;font-size:12px;}
	.gnr_tit{height:35px;line-height:35px;padding-left:12px;font-size:16px;}
	.gnr_hidtips{padding:30px 13px 0;cursor:pointer;color:#66b1ff;}
	.nomessage{height:150px;line-height:150px;color:#999;text-align:center;}
</style>
